<template>
  <div class="unique">
    <div class="card-body">
      <el-form label-width="120px">
        <el-row :gutter="30" style="padding-left:30px">
          <el-col :span="8">
            <el-form-item label="运单编号 :">
              <el-input class="el-col" placeholder="请输入运单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单编号 :">
              <el-input class="el-col" placeholder="请输入订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调度状态 :">
              <el-select v-model="selectedValue" class="el-col" placeholder="请选择">
                <el-option label="待调度" value="0" />
                <el-option label="未匹配线路" value="1" />
                <el-option label="已调度" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始地机构 :">
              <el-select v-moudle="selectedValue1" placeholder="请选择">
                <el-option v-for="item in dataList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地机构 :">
              <el-select v-moudle="selectedValue2" class="el-col" placeholder="请选择目的地机构">
                <el-option v-for="item in dataList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当前所在机构 :">
              <el-select v-moudle="selectedValue3" class="el-col" placeholder="请选择当前所在机构">
                <el-option v-for="item in dataList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" style="padding-left:50px">
          <el-col>
            <el-button type="primary">搜索</el-button>
            <el-button>重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tab-change">

      <div class="tab-item">
        <span class="status">全部</span>&nbsp;&nbsp;
        <span>55</span>
      </div>
      <div class="tab-item">
        <span class="status">新建</span>&nbsp;&nbsp;
        <span>2</span>
      </div>
      <div class="tab-item">
        <span class="status">已装车</span>&nbsp;&nbsp;
        <span>0</span>
      </div>
      <div class="tab-item">
        <span class="status">运输中</span>&nbsp;&nbsp;
        <span>0</span>
      </div>
      <div class="tab-item">
        <span class="status">到达终端网点</span>&nbsp;&nbsp;
        <span>51</span>
      </div>
      <div class="tab-item">
        <span class="status">拒收</span>&nbsp;&nbsp;
        <span>2</span>
      </div>
      <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部 55" name="0" />
        <el-tab-pane label="新建 2" name="1" />
        <el-tab-pane label="已装车 0" name="2" />
        <el-tab-pane label="运输中 0" name="3" />
        <el-tab-pane label="到达终端网点 51" name="4" />
        <el-tab-pane label="拒收 2" name="5" />
      </el-tabs> -->
    </div>

    <div class="form-foot">
      <el-row type="flex">
        <el-col>
          <el-button type="primary" class="btu">调度分配</el-button>

        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%;max-width: 100%"
        max-height="400"
      >
        <el-table-column
          prop="date"
          label="序号"
          width="60"
        />
        <el-table-column
          prop="name"
          label="运单编号"
          width="160"
        />
        <el-table-column
          prop="province"
          label="订单编号"
          width="160"
        />
        <el-table-column
          prop="city"
          label="运单状态"
          width="130"
        />
        <el-table-column
          prop="address"
          label="调度状态"
          width="100"
        />
        <el-table-column
          prop="zip"
          label="起始营业部"
          width="170"
        />
        <el-table-column
          prop="zip"
          label="终点营业部"
          width="170"
        />
        <el-table-column
          prop="zip"
          label="当前所在机构"
          width="170"
        />
        <el-table-column
          prop="zip"
          label="下一个机构"
          width="170"
        />
        <el-table-column
          prop="zip"
          label="货品总体积（立方米）"
          width="170"
        />
        <el-table-column
          prop="zip"
          label="货品总重量（千克）"
          width="170"
        />
        <el-table-column
          prop="zip"
          label="创建时间"
          width="170"
        />
        <el-table-column
          prop="zip"
          label="更新时间"
          width="170"
        />

        <el-table-column
          fixed="right"
          label="操作"
          width="85"
        >

          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">

        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

  </div>
</template>

<script>
import { getMechanism } from '@/api/mechanism'
export default {
  components: {},
  props: {},
  data() {
    return {
      selectedValue: '',
      selectedValue1: '',
      selectedValue2: '',
      selectedValue3: '',
      dataList: [],
      tableData: [{
        date: '1',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '3',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },
      {
        date: '4',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },
      {
        date: '5',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },
      {
        date: '6',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },
      {
        date: '7',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },
      {
        date: '8',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },
      {

        date: '9',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      activeName: 'first'
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await getMechanism()
    // this.dataList = await getMechanism(JSON.parse(res.data.data))
    const data = JSON.parse(res.data.data)
    this.dataList = data
    console.log(this.dataList)
    console.log(JSON.parse(res.data.data))
  },
  mounted() {

  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}

</script>
<style lang="scss" scoped>
.card-body {
  flex: 1;
  height: 238.8px;
  background-color: #fff;
  margin: 23px 20px 20px;
  padding: 20px 20px 58px 0px;
  ::v-deep.el-input__inner {
  width: 240px;
}
}
.tab-change {
  flex: 1;
  height: 48px;
  background-color: #fff;
  margin: 23px 20px 20px;
  display: flex;
}

.form-foot{
  flex: 1;
  margin: 23px 20px 20px;
  overflow: auto;
  background-color: #fff;
  padding: 28px 28px 58px ;

.btu{
  margin: 0px 0px 20px;
  padding: 12px 20px;
}
}

.el-table__body-wrapper {
  overflow-x: auto;
}

.tab-item{
  width: 120px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.tab-item:active,
.tab-item:focus {
  background-color: #ffeeeb;
  color: #e15536;
}
.el-button{
  width: 90px;

}
.unique{
    min-width: 1200px;
}
.block{
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
